<template>
  <div class="banner">
    <!-- 对话框区域 -->
    <div class="diagbox">
      <div class="eidtbox">
        <el-form :model="editObj"
                 label-width="100px"
                 :rules="rules"
                 ref="editForm">
          <el-form-item label="轮播图名称:"
                        prop="imgName">
            <el-input v-model="editObj.imgName"></el-input>
          </el-form-item>
          <el-form-item label="链接地址:"
                        prop="linkUrl">
            <el-input v-model="editObj.linkUrl"></el-input>
          </el-form-item>
          <el-form-item label="状态:">
            <el-radio-group v-model="editObj.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-upload class="avatar-uploader"
                       :action="actionUrl"
                       :headers='headers'
                       :show-file-list="false"
                       name='banner'
                       :before-upload="beforeUpload"
                       :on-success='handleAvatarSuccess'
                       props="imgUrl">
              <img v-if="editObj.imgUrl"
                   :src="editObj.imgUrl"
                   class="avatar" />
              <i class="el-icon-plus avatar-uploader-icon"
                 v-else></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
            class="footer">
        <el-button>取 消</el-button>
        <el-button type="primary"
                   @click="addBanner">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { addBanner } from '@/api'
export default {
  data () {
    return {
      headers: { Authorization: "" },
      loading: false,
      editDiaShow: false,
      actionUrl: 'http://192.168.1.9:3000/api/admin/upload',
      editObj: {
        bannerId: 1,
        imgName: "",
        linkUrl: "",
        status: 1,
        imgUrl: ""
      },
      tableData: [],
      rules: {
        imgName: [
          { required: true, message: "轮播图名称不能为空", trigger: "blur" }
        ],
        linkUrl: [
          { required: true, message: "链接地址不能为空", trigger: "blur" }
        ]
      }
    };
  },
  created () {
    this.headers.Authorization = 'Bearer ' + this.getUserInfo.token;
  },
  computed: {
    ...mapGetters('login', ['getUserInfo'])
  },
  methods: {
    handleAvatarSuccess (res, file) {
      console.log(res, 111111)
      this.editObj.imgUrl = res.data.imgUrl

    },
    beforeUpload (file) {
      const isJPG = file.type === "image/png"; //如果是jpeg格式，true，false
      const isLt2M = file.size / 1024 / 1024 < 2; //如果是小于2M  true，flase

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    addBanner (res) {
      this.$refs.editForm.validate(vaild => {
        if (vaild) {
          if (this.editObj.imgUrl) {
            console.log(res, 222222222)
            addBanner(this.editObj).then(res => {

              if (res.code == 200 && res.msg == '添加成功') {
                this.$router.push({ name: 'bannerindex' })
              }
            })
          } else (
            this.$messape.error('图片必须上传')
          )
        }
      })
      // addBanner(this.editObj).then(res => {

      // })
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  min-height: calc(100vh - 98px);
  background: #fff;
  padding: 15px;
  .toolbar {
    margin-bottom: 20px;
    overflow: hidden;
    .left {
      float: left;
    }
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .eidtbox {
    width: 400px;
    margin: 0 auto;
  }
}

.avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.footer {
  width: 178px;
  height: 50px;
  display: block;
  margin: 0 auto;
}
</style>